<template>
  <div>
    <!-- 导航栏 -->
    <el-menu
        default-active="0"
        class="el-menu-demo"
        mode="horizontal"
        background-color="#33405F"
        text-color="#FFC300"
        active-text-color="#ffd04b"
        router
        @select="handleSelect"
    >
    <el-menu-item style="margin-left:150px" index="/">首页</el-menu-item>
    <el-menu-item
        v-for="category in categoryList"
        :index="category.id.toString()"
        :key="category.id"
    >
        {{ category.name }}
    </el-menu-item>
    </el-menu>
    
  </div>
</template>

<script>
import api from "@/api/headerList/headerNav";

export default {
  data() {
    return {
      categoryList: [],
    };
  },
  created() {
    this.fetchData();
  },
  methods: {
    fetchData() {
      api.allCategory().then((res) => {
        console.log(res)
        this.categoryList = res.data.data;
      });
    },

    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    },
  },
};
</script>

<style>
* {
    margin: 0 auto;
    padding: 0;
}
</style>